<template>
  <div class="page-box">
    <el-form ref="form" :model="formData" :rules="rules" label-width="110px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础配置" name="base">
          <el-card class="box-card">
            <div>
              <el-divider content-position="left"><h3>站点配置</h3></el-divider>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="站点名称" prop="site_name">
                    <el-input v-model="formData.site_name" placeholder="请输入站点名称" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="站点链接" prop="site_link">
                    <el-input v-model="formData.site_link" placeholder="请输入站点链接" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="站点关键字" prop="site_keywords">
                    <el-input v-model="formData.site_keywords" placeholder="请输入站点关键字" type="textarea" rows="4" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="是否关闭网站" prop="close_website">
                    <el-select v-model="formData.close_website" placeholder="请选择">
                      <el-option label="是" :value="1+''" />
                      <el-option label="否" :value="2+''" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-divider content-position="left"><h3>底部信息</h3></el-divider>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="备案号" prop="copy_code">
                    <el-input v-model="formData.copy_code" placeholder="请输入备案号" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="版权信息" prop="copy_info">
                    <el-input v-model="formData.copy_info" placeholder="请输入版权信息" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入联系方式" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="备案链接地址" prop="copy_url">
                    <el-input v-model="formData.copy_url" placeholder="请输入备案链接地址" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-divider content-position="left"><h3>其他配置</h3></el-divider>
              <el-row>
                <el-col :span="14" :offset="5">
                  <el-form-item label="黑名单IP" prop="black_ip">
                    <el-input v-model="formData.black_ip" placeholder="黑名单IP，用逗号隔开，注意英文半角逗号" type="textarea" rows="4" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-divider />
              <el-row type="flex" justify="center">
                <el-button type="success" icon="el-icon-folder-checked" @click="submit(1)">保存</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="submit(2)">重置</el-button>
              </el-row>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="系统设置" name="seo">
          <el-card class="box-card">
            <el-divider content-position="left"><h3>系统管理设置</h3></el-divider>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="系统名称" prop="system_name">
                  <el-input v-model="formData.system_name" placeholder="请输入系统名称" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="系统logo" prop="system_logo">
                  <el-upload
                    :class="{disable:formData.system_logo}"
                    :file-list="[{url:'http://124.223.14.236:8060/'+formData.system_logo}]"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture"
                  >
                    <div slot="tip" class="el-upload__tip">显示在左上角位置，大小建议200*200</div>
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="网页图标" prop="title">
                  <el-upload
                    :class="{disable:formData.web_ico}"
                    :file-list="[{url:'http://124.223.14.236:8060/'+formData.web_ico}]"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">网页favicon文件，ico类型，建议64*64</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="登录标题" prop="login_title">
                  <el-input v-model="formData.login_title" placeholder="请输入站点名称" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="登录页背景图" prop="loginreg_bg">
                  <el-upload
                    :class="{disable:formData.login_bg}"
                    :file-list="[{url:'http://124.223.14.236:8060/'+ formData.login_bg}]"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">建议1920*1080尺寸</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <div>
              <el-divider />
              <el-row type="flex" justify="center">
                <el-button type="success" icon="el-icon-folder-checked" @click="submit(1)">保存</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="submit(2)">重置</el-button>
              </el-row>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="其他设置" name="content">
          <el-card class="box-card">
            <el-divider content-position="left"><h3>通知公告</h3></el-divider>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="公告标题" prop="notic_title">
                  <el-input v-model="formData.notic_title" placeholder="请输入公告标题" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="通知内容" prop="site_keywords">
                  <el-input v-model="formData.notic_content" placeholder="请输入通知内容" type="textarea" rows="4" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="left"><h3>前台图片</h3></el-divider>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="登录/注册页背景" prop="title">
                  <el-upload
                    :class="{disable:formData.loginreg_bg}"
                    :file-list="formData.loginreg_bg?[{url:'http://124.223.14.236:8060/'+ formData.loginreg_bg}]:[]"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">尺寸 200*200</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14" :offset="5">
                <el-form-item label="前台logo" prop="title">
                  <el-upload
                    :class="{disable:formData.web_img}"
                    :file-list="[{url:'http://124.223.14.236:8060/'+ formData.web_img}]"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">尺寸168*70，透明，白色</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider />
            <el-row type="flex" justify="center">
              <el-button type="success" icon="el-icon-folder-checked" @click="submit(1)">保存</el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="submit(2)">重置</el-button>
            </el-row>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>
<script>
import { addArticle, editArticle } from '@/api/content/article'
import { getAllConfig } from '@/api/system/config'
// import { resetConfig } from '@/api/user'
export default {
  data() {
    return {
      configFrom: '',
      activeName: 'base',
      tagList: [],
      fileList: [],
      formData: {
        'web_ico': 'uploadimages202306251687699877946.png',
        'system_logo': 'uploadimages202306251687699909386.png',
        'system_name': '优点达资讯系统',
        'site_name': '优点达资讯-发现有意思的事儿',
        'site_link': 'http://122.51.249.55:8060/home',
        'site_keywords': '优点达资讯系统，优点达资讯系统优点达资讯系统优点达资讯系统',
        'close_website': '2',
        'copy_code': '皖-备88888888',
        'copy_info': '优点达版权所有，翻版必究',
        'phone': 'hewu1122@163.com',
        'copy_url': 'http://www.baidu.com',
        'black_ip': '',
        'login_title': '优点达资讯系统',
        'notic_title': '感谢广告网网友',
        'loginreg_bg': '',
        'web_img': 'upload/images/20211101/1635766045081.jpg',
        'notic_content': '非常感谢广告网网友对本网站的关注和喜爱，如果有任何的问题，欢迎提供宝贵意见，练习方式参见网站底部邮箱。',
        'login_bg': 'static/admin/image/loginbg.png'
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入文章作者', trigger: 'blur' }
        ],
        cateid: [
          { required: true, message: '请选择文章分类', trigger: 'change' }
        ],
        click: [
          { required: true, message: '请输入阅读次数', trigger: 'blur' }
        ],
        create_date: [
          { type: 'date', required: true, message: '请选择创建时间', trigger: 'change' }
        ],
        lovenum: [
          { required: true, message: '请输入收藏数量', trigger: 'blur' }
        ],
        pic: [
          { required: true, message: '请上传文章封面', trigger: 'change' }
        ],
        tags: [
          { type: 'array', required: true, message: '请至少选择一个标签', trigger: 'change' }
        ],
        keywords: [
          { required: true, message: '请填写SEO关键字', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请填写SEO描述', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写文章内容', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value === '<p><br/></p>') {
              callback(new Error('请填写文章内容'))
            } else {
              callback()
            }
          }, trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  async created() {
    this.initData()
    // resetConfig()
  },
  methods: {
    async initData() {
      const res = await getAllConfig()
      this.formData = res.configForm
    },
    // 自定义图片上传
    // async handleUpload(fileData) {
    //   const res = await uploadImg(fileData)
    //   this.formData.pic = res.savePath
    // },
    // 图片上传成功
    handleSuccess(reponse) {
      this.formData.pic = reponse.data.savePath
    },
    // 图片上传之前
    beforeUpload(file) {
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warning('图片大小超过上传限制！')
        return false
      }
    },
    // 提交表单 编辑或新增
    async submit(status) {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          // 处理时间 发布状态 标签
          this.formData.status = status
          this.formData.create_date = +new Date(this.formData.create_date)
          this.formData.tags = this.formData.tags.join(',')
          // 根据是否有查询参数id判断是编辑还是新增
          if (this.$route.params.id) {
            await editArticle(this.formData)
            this.$message.success('编辑文章成功！')
          } else {
            await addArticle(this.formData)
            this.$message.success('发布文章成功!')
          }
          this.$router.push('/content_article')
        } else {
          return this.$message.warning('请将所有信息填写完毕后提交！')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
// 隐藏图片上传按钮
 :deep(.disable .el-upload--picture) {
    display: none;
}
::v-deep .el-list-leave-active {
  transition: none;
}
::v-deep .el-list-leave-to {
  transition: none;
}
</style>
